<template>
  <div class="resource-cover">
    <a @click="toDetail(drama.id)">
      <el-image fit="cover" :src="drama.cover | filterImg"></el-image>
    </a>
    <h5 class="title" @click="toDetail" style="text-align: center">
      <el-tooltip :content="drama.title" placement="bottom" effect="light">
        <el-link :underline="false" v-text="drama.title">
          学校202{{ index }}
        </el-link>
      </el-tooltip>
    </h5>
  </div>
</template>

<script>

export default {
  name: "ResourceCover",
  props: {
    index: '',
    drama: Object
  },
  methods: {
    toDetail(id) {
      let {href} = this.$router.resolve({path: `/detail/${id}`})
      window.open(href, '_blank')
      // this.$router.push(`/detail/1`)
    }
  },
  filters: {}
}
</script>

<style scoped>
.resource-cover {
  margin-bottom: 10px;
}

.resource-cover h5 {
  font-weight: 500;
  font-size: 14px;
  margin: 5px 0;
  color: #666666;
}

.el-image {
  height: 150px;
}

a {
  cursor: pointer;
}

.resource-cover .title {
  max-width: 100px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
}
</style>
